<template>
	<view class="box">
		<view class="header">
			<image src="https://s1.ax1x.com/2022/11/20/zMlUvn.jpg" mode=""></image>
			<text>登录</text>
		</view>
		<view class="img">
		</view>
		<view class="from" v-if="isshow===true">
			<view class="type">
				<view class="code">验证码登录</view>
				<view class="pass" @click="show">密码登录</view>
			</view>
			<view class="input">
				<input type="text" v-model="mobile" maxlength='11' placeholder="请输入手机号">
				<input class="two" v-model="code" maxlength='6' type="text" placeholder="请输入验证码">
			</view>
			<view class="get" @click="getcode">
				{{!currentTime?time:currentTime+'s'}}
			</view>
		</view>
		<view class="from" v-else="isshow===false">
			<view class="type">
				<view class="code">密码登录</view>
				<view class="pass" @click="show">验证码登录</view>
			</view>
			<view class="input">
				<input type="text" v-model="mobile" maxlength='11' placeholder="请输入手机号">
				<input class="two" v-model="pass" maxlength='6' type="text" placeholder="请输入密码">
			</view>
			<view class="get" @click="updata">
				忘记密码
			</view>
		</view>
		<view class="btu" @click="login">
			登录
		</view>
		<view class="none" @click="go">
			没有账号,立即注册
		</view>
	</view>
</template>

<script>
	import {
		reqcode,
		reqloginone,
		reqlogintwo
	} from '@/pages/utils/api.js'
	export default {
		data() {
			return {
				mobile: "",
				code: "",
				pass: "",
				isshow: true,
				time: '获取验证码',
				currentTime: 0,
				disabled: true,
				interval: null,
			}
		},
		methods: {
			// 获取验证码
			async getcode() {
				if (this.mobile == "") {
					uni.showToast({
						title: "请先填写手机号",
						icon: 'error'
					})
				} else {
					if (this.currentTime > 0) {
						uni.showToast({
							title:'不能重复获取',
							icon:'error'
						})
						return false
					}
					let res = await reqcode({
						mobile: this.mobile
					})
					if (res.errCode == 10000) {
						this.currentTime = 60
						this.interval = setInterval(() => {
							this.currentTime--
							this.time = this.currentTime + '秒'
							if (this.currentTime < 1) {
								clearInterval(this.interval)
								this.time = '重新发送',
									this.currentTime = 0
							}
						}, 1000)
					}else{
						uni.showToast({
							title:res.errMsg,
							icon:'error'
						})
					}
					console.log(res);
				}
			},
			async login() {
				if (this.isshow) {
					// 会员登录（验证码登录方式）
					if (this.code == "" || this.mobile == "") {
						uni.showToast({
							title: "请输入验证码或手机号",
							icon: 'error'
						})
					} else {
						if (this.disabled === false) {
							uni.showToast({
								title: "请先获取验证码",
								icon: 'error'
							})
						} else {
							let obj = {
								mobile: this.mobile,
								code: this.code
							}
							let res = await reqloginone(obj)
							console.log(res);
							if (res.errCode == 10000) {
								uni.setStorageSync("userInfo", res.data.member)
								uni.setStorageSync("token", res.data.token)
								uni.showToast({
									title: "登录成功",
									icon: 'success'
								})
								uni.reLaunch({
									url: '/pages/home/home'
								})
								this.mobile = ""
								this.code = ""
							} else {
								uni.showToast({
									title: "登录失败,手机号或验证码不正确",
									icon: 'error'
								})
							}

						}

					}
				} else {
					if (this.pass == "" || this.mobile == "") {
						uni.showToast({
							title: "请输入手机号或密码",
							icon: 'error'
						})
					} else {
						// 会员登录（密码登录方式）
						let obj = {
							mobile: this.mobile,
							pass: this.pass
						}
						let res = await reqlogintwo(obj)
						uni.setStorageSync("userInfo", res.data.member)
						uni.setStorageSync("token", res.data.token)
						console.log(res);
						if (res.errCode == 10000) {
							uni.showToast({
								title: "登录成功",
								icon: 'success'
							})
							uni.reLaunch({
								url: '/pages/home/home'
							})
						} else {
							uni.showToast({
								title: "登录失败,手机号或密码不正确",
								icon: 'error'
							})
						}
						this.mobile = ""
						this.pass = ""
					}

				}
			},
			// 切换登录方式
			show() {
				console.log(this.isshow);
				this.isshow = !this.isshow
				this.mobile = ""
				this.code = ""
			},
			// 跳转到注册页面
			go() {
				uni.navigateTo({
					url: './enrolment'
				})
			},
			// 忘记密码
			updata() {
				uni.navigateTo({
					url: './updata'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		background-color: #f9f9f9;
		width: 100%;
		height: 100vh
	}

	.header {
		width: 100%;
		height: 100rpx;
		background-color: #49a1fa;
		display: flex;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 45rpx;
			margin-top: 35rpx;
		}

		text {
			color: #fff;
			margin-left: 245rpx;
			line-height: 100rpx;
		}
	}

	.img {
		width: 100%;
		height: 254rpx;
		background-color: #f4f5fa;
		background-image: url("https://s1.ax1x.com/2022/11/20/zMQIpj.png");
		background-size: 100%;
	}

	.from {
		width: 700rpx;
		height: 410rpx;
		background-color: #fff;
		border-radius: 15rpx;
		position: absolute;
		top: 204rpx;
		left: 25rpx;

		.type {
			width: 700rpx;
			height: 170rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.code {
				font-size: 36rpx;
				font-weight: 700;
				margin-left: 220rpx;
				margin-right: 100rpx;
			}

			.pass {
				font-size: 28rpx;
				cursor: pointer; //鼠标变小手
			}
		}
	}

	.input input {
		width: 640rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 36rpx;
		font-size: 28rpx;

	}

	.two {
		width: 400rpx !important;
		border-bottom: none !important;
	}

	.get {
		font-size: 30rpx;
		color: #2f6ab4;
		position: absolute;
		top: 300rpx;
		right: 80rpx;
	}

	.btu {
		margin-top: 350rpx;
		width: 490rpx;
		height: 100rpx;
		background-color: #49a1fa;
		border-radius: 50rpx;
		text-align: center;
		line-height: 100rpx;
		margin-left: 130rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.none {
		margin-top: 125rpx;
		text-align: center;
	}
</style>
